<template>
  <div>
    <div class="index">
      <div class="articleList">
        <div v-for="(item, index) in list" :key="index" class="articleCard">
          <router-link :to="{path: '/articleDetail', query: {id: item.id}}" class="link">
            <el-image class="articleImg" :src="item.img" fit="cover"></el-image>
          </router-link>
          <div class="articleWord">
            <router-link :to="{path: '/articleDetail', query: {id: item.id}}" class="link"><a>{{item.title}}</a></router-link>
            <p class="articleText">{{item.text}}</p>
            <p class="articleTime">{{item.time}}<i class="el-icon-s-flag">{{item.id}}</i></p>
          </div>
        </div>
      </div>
      <div class="addArticleBtn">
        <router-link to="/addArticle"><el-button type="primary" :disabled="disabled">{{ this.$store.state.isLogin ? '新增文章' : '请先登录' }}</el-button></router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'articleIndex',
  data () {
    return {
      list: [],
      disabled: !this.$session.has("userName")
    }
  },
  mounted () {
    this.axios.get('api/getArticleList').then((res) => {
      this.list = res.data
      for (let i = 0; i < res.data.length; i++) {
        const time = new Date(this.list[i].time)
        const resDate = time.getFullYear() + '-' + this.p((time.getMonth() + 1)) + '-' + this.p(time.getDate())
        const resTime = this.p(time.getHours()) + ':' + this.p(time.getMinutes()) + ':' + this.p(time.getSeconds())
        res.data[i].time = `${resDate} ${resTime}`
      }
      this.list = this.list.reverse()
    })
  },
  methods: {
    p (s) {
      return s < 10 ? '0' + s : s
    }
  }
}
</script>

<style lang='stylus' scoped>
  .index
    background-color rgba(222, 222, 222, .6)
    .addArticleBtn
      padding-bottom 2rem
    .articleList
      display flex
      flex-wrap wrap
      justify-content center
      .articleCard
        margin 2rem 2rem
        width 13rem
        height 18rem
        background-color rgba(222, 222, 222, .5)
        display flex
        flex-direction column
        .articleImg
          margin 0 auto
          width 13rem
          height 11rem
        .articleWord
          display flex
          flex-direction column
          align-items stretch
          justify-content space-between
          padding .6rem .6rem 0 .6rem
          height 7rem
          .link
            color #444
            font-size 1.2rem
            font-weight bold
            text-decoration none
          .articleText
            font-size .9rem
            margin .3rem 0
          .articleTime
            // flex-direction column-reverse
            font-size 0.75rem
          .el-icon-s-flag
            margin-left 1.25rem
</style>
